<template>
  <!-- 面包屑 -->
  <div class="breadcrumb">
    <span
      class="breadcrumb__item"
      :class="{
            'breadcrumb__active': index === data.length - 1
        }"
      v-for="(item, index) of data"
      :key="index"
    >
      <template v-if="index !== data.length - 1">
        <a
          class="breadcrumb__link"
          :href="item.path"
        >{{item.label}}</a>
        <span class="breadcrumb__split">/</span>
      </template>
      <template v-else>{{item.label}}</template>
    </span>
  </div>
</template>

<script>
export default {
  name: "Breadcrumb",
  props: {
    data: {
      type: Array,
      default() {
        // [{label: '首页', path: '/home'}]
        return [];
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "@/assets/common/css/__color.scss";

.breadcrumb {
  padding: 25px 0 25px 30px;
  &__link,
  &__split {
    color: $tipColor;
  }
  &__split {
    margin: 0 10px;
  }
  &__active {
    color: $majorColor;
  }
}
</style>